<template>
  <div v-if="loading"
       class="fixed inset-0 top-0 left-0 w-full h-full flex items-center justify-center z-50  bg-gray-500 opacity-75">
    <div v-if="type==='circle'"
         class="animate-spin rounded-full h-32 w-32 border-t-4 border-b-4 border-purple-500"></div>
    <div v-else-if="type==='line'"
         class="w-8 h-8 border-4 border-dashed rounded-full animate-spin border-purple-400"></div>
    <div v-else>
    </div>
  </div>

</template>

<script setup lang="ts">

defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  type: {
    type: String,
    default: 'circle'
  }
})

</script>

<style>

.loading-enter-active,
.loading-leave-active {
  transition: opacity 0.5s;
}

.loading-enter,
.loading-leave-to {
  opacity: 0;
}
</style>